<!-- 活动管理弹窗 -->
<template>
  <div>
    <a-modal
      :maskClosable="false"
      :title="title"
      centered
      :width="1000"
      v-model="visible"
      :rules="rules"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
    >
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-model-item label="问卷标题:" prop="title">
          <a-input placeholder="请输入标题" :disabled="type === 'edit'" v-model="form.title" :max="12" />
        </a-form-model-item>
        <a-form-model-item label="问卷结束时间:">
          <a-date-picker
            v-model="form.endTime"
            show-time
            placeholder="请选择"
            valueFormat="YYYY-MM-DD HH:mm:ss"
            :disabled="type === 'edit'"
          />
        </a-form-model-item>
        <a-form-model-item style="height: 104px" label="封面图:">
          <UploadImg
            v-model="form.img"
            :width="125"
            :height="100"
            :disabled="type === 'edit'"
            cropper
            :cropperEnlarge="2"
          >
            <template slot="tips">
              500*400
            </template>
          </UploadImg>
        </a-form-model-item>
        <a-form-model-item label="描述:" prop="describe">
          <a-textarea placeholder="请输入描述" v-model="form.describe" :disabled="type === 'edit'" />
        </a-form-model-item>
        <div style="display: flex; margin-bottom: 10px" v-for="(item, index) in form.questionList" :key="index">
          <div style="background: #f6f5ec; flex: 1">
            <a-form-model-item label="问题内容:">
              <a-input placeholder="请输入问题内容" v-model="item.title" :disabled="type === 'edit'" :maxLength="100" />
            </a-form-model-item>
            <a-form-model-item label="是否必答:">
              <a-radio-group name="radioGroup" v-model="item.requiredFlag" :disabled="type === 'edit'">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="答案类型:">
              <a-radio-group
                name="radioGroup"
                v-model="item.questionType"
                @change="e => handleChangeType(e, item, index)"
                :disabled="type === 'edit'"
              >
                <a-radio :value="11">单选</a-radio>
                <a-radio :value="21">多选</a-radio>
                <a-radio :value="31">文本</a-radio>
                <a-radio :value="32">图片</a-radio>
                <a-radio :value="12">单选(图片)</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item v-if="[11, 21].includes(item.questionType)" label="选项内容:" prop="words">
              <div
                style="display: flex; align-items: center; margin-bottom: 10px"
                v-for="(sItem, sIndex) in item.answerItemList"
                :key="sIndex"
              >
                <span style="flex-shrink: 0; margin-right: 5px">选项{{ sIndex + 1 }}</span>
                <a-input
                  placeholder="请输入选项内容"
                  v-model="sItem.words"
                  :disabled="type === 'edit'"
                  :maxLength="100"
                  message="最大输入100字"
                />
                <a-icon
                  v-if="type !== 'edit'"
                  type="delete"
                  style="margin-left: 10px"
                  @click="handleDelSelectOps(index, sIndex)"
                />
                <a-icon
                  v-if="type !== 'edit'"
                  type="plus-circle"
                  style="margin-left: 10px"
                  @click="handleAddSelectOps(index)"
                />
              </div>
            </a-form-model-item>
            <a-form-model-item v-else-if="item.questionType === 12" label="上传图片(限四张)">
              <UploadImg
                :value="item.answerItemList.map(v => v.img)"
                @input="urls => changeImagesUrl(urls, index)"
                :limit="4"
                :disabled="type === 'edit'"
              />
            </a-form-model-item>
          </div>
          <a-icon v-if="type !== 'edit'" type="delete" style="margin-left: 10px" @click="handleDelQuestion(index)" />
        </div>
        <a-button type="primary" @click="handleAddQuestion" :disabled="type === 'edit'">新增问题</a-button>
      </a-form-model>
      <template slot="footer">
        <a-button type="primary" @click="handleSubmit" :disabled="type === 'edit'">提交</a-button>
        <a-button @click="handleCancel">取消</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import { questionCreate, questionInfo } from '@/api/operations/questionnaire'
import moment from 'moment'
import UploadImg from '@/components/UpFile/uploadImg'

export default {
  components: {
    UploadImg
  },
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: {
        title: undefined,
        img: undefined,
        describe: undefined,
        endTime: undefined,
        memberList: [],
        questionList: [
          {
            title: undefined,
            questionType: 11,
            requiredFlag: 1,
            loading: false,
            answerItemList: [
              {
                words: undefined
              }
            ]
          }
        ]
      },
      rules: {
        title: [
          { required: true, message: '请输入问卷标题', trigger: 'blur' },
          { max: 50, message: '标题最大限制50字数', trigger: 'blur' }
        ],
        describe: [{ max: 200, message: '最大限制200字数', trigger: 'blur' }]
      },
      title: '',
      type: '',
      questionnaireId: '',
    }
  },
  methods: {
    moment,
    //新增问题
    handleAddQuestion() {
      this.form.questionList.push({
        title: undefined,
        questionType: 11,
        requiredFlag: 1,
        answerItemList: [
          {
            words: undefined,
            img: undefined
          }
        ]
      })
    },
    //删除问题
    handleDelQuestion(index) {
      if (this.form.questionList.length === 1) {
        return this.$message.error('请至少保留一个问题')
      }
      this.form.questionList.splice(index, 1)
    },
    //添加选项内容
    handleAddSelectOps(index) {
      this.form.questionList[index].answerItemList.push({ words: undefined, img: undefined })
    },
    //删除选项内容
    handleDelSelectOps(index, sIndex) {
      if (this.form.questionList[index].answerItemList.length === 1) {
        return this.$message.error('请至少保留一个选项')
      }
      this.form.questionList[index].answerItemList.splice(sIndex, 1)
    },
    //更改答案类型
    handleChangeType(e, item, index) {
      let value = e.target.value
      if (value !== 12) {
        this.type
      }
      if ([3, 5, 12].includes(value)) {
        item.answerItemList = []
      } else {
        item.answerItemList = [{ words: '' }]
      }
      this.form.questionList[index] = item
    },
    add(obj) {
      this.type = obj.type
      this.title = obj.title
      this.visible = true
      this.$nextTick(() => {
        Object.keys(this.form).forEach(k => {
          if (k === 'questionList') {
            this.form[k] = [
              {
                title: undefined,
                requiredFlag: 1,
                questionType: 11,
                answerItemList: [
                  {
                    words: undefined,
                    img: undefined
                  }
                ]
              }
            ]
          } else {
            this.form[k] = undefined
          }
        })
      })
    },
    edit(obj) {
      this.type = obj.type
      this.title = obj.title
      this.questionnaireId = obj.data.questionnaireId
      this.visible = true
      this.getQuestionInfo()
      console.log('obj----->', obj)
    },
    getQuestionInfo() {
      questionInfo(this.questionnaireId).then(res => {
        console.log('res---->', res)
        this.form = res.data
        if (this.type === 'copy') {
          this.form.questionList = res.data.questionList.map(item => {
            return {
              ...item,
              questionId: undefined,
              answerItemList: item.answerItemList.map(aItem => {
                return { ...aItem, answerId: undefined }
              })
            }
          })
        }
        this.form.questionnaireId = undefined
      })
    },
    // 上传图片
    changeImagesUrl(urls, index) {
      this.form.questionList[index].answerItemList = urls.map(v => {
        return {
          img: v
        }
      })
    },
    handleSubmit() {
      console.log('form=', this.form)
      let _this = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          questionCreate(this.form).then(res => {
            if (res.code === 0) {
              _this.$message.success('新增成功', 1)
              _this.visible = false
              _this.$emit('add')
              _this.form.questionList[0].questionType = 11
            } else {
              _this.$message.error(res.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCancel() {
      try {
        this.$refs.ruleForm.resetFields()
      } catch (error) {}
      this.form.endTime = ''
      this.form.img = ''
      this.form.questionList[0].questionType = 11
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
.tree {
  max-height: 400px;
  overflow: auto;
}

::v-deep {
  .ql-editor {
    height: 200px;
  }
}
</style>
